<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全百科,危险品名录</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="危险品名称">
                            <el-input placeholder="请输入" class="inputW" v-model="dangerousName"></el-input>
                        </el-form-item>
                        <el-form-item label="cn编号">
                            <el-input placeholder="请输入" class="inputW" v-model="CNnumber"></el-input>
                        </el-form-item>
                        <el-form-item label="危险品类型">
                            <el-select class="inputW" v-model="dangerousType">
                                <el-option
                                        v-for="item in DangerousData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn" v-if="roleId==1">新增</el-button>
                            <!--                            <el-button type="success" @click="search">导出模板</el-button>-->
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="CNnumber" label="CN编号"></el-table-column>
                    <el-table-column prop="dangerousName" label="危险品名称"></el-table-column>
                    <el-table-column prop="dangerousAlias" label="危险品别名"></el-table-column>
                    <el-table-column prop="dangerousTypeName" label="危险品类型"></el-table-column>
                    <el-table-column prop="remarks" label="备注"></el-table-column>
                    <el-table-column label="操作" v-if="roleId==1">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                            <el-button icon="el-icon-delete" round size="small"
                                       @click="delBtn(scope.row.Id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑危险品名录':'新增危险品名录'" :visible.sync="dialogFormVisible">
            <el-form :model="param" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item>
                    <el-form-item label="CN编号" :label-width="120" :rules="[
                             {required:true,message:'CN编号!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.CNnumber" type="number" autocomplete="off" class="itemW" prop="CNnumber"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="危险品名称" :label-width="120" :rules="[
                             {required:true,message:'危险品名称!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.dangerousName" autocomplete="off" class="itemW"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="危险品别名" :label-width="120" :rules="[
                             {required:true,message:'危险品别名!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.dangerousAlias" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="危险品类型" :label-width="130" :rules="[
                             {required:true,message:'危险品类型!',trigger:'blur'}
                            ]">
                    <el-select v-model="param.dangerousType" style="width: 200px" @change="select_status">
                        <el-option
                                v-for="item in DangerousData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" :label-width="120" :rules="[
                             {required:true,message:'备注!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.remarks" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitClick">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            dialogFormVisible: false,
            param: {},
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            projectNo: '',
            riskName: '',
            registerNum: '',
            riskLevel: '',
            editMod: false,
            Chargerlist: [],
            CNnumber: '',
            dangerousName: '',
            dangerousType: 0,
            DangerousData: [
                {Name: '直接选择或搜索选择', Id: 0},
                {Name: '不燃气体', Id: 1},
                {Name: '易燃固体', Id: 2},
                {Name: '易燃气体', Id: 3},
                {Name: '低闪点易燃液体', Id: 4},
                {Name: '有机过氧化物', Id: 5},
                {Name: '中闪点易燃液体', Id: 6},
                {Name: '其他腐蚀品', Id: 7},
                {Name: '自燃物品', Id: 8},
                {Name: '碱性腐蚀品', Id: 9},
                {Name: '低闪点液体', Id: 10},
                {Name: '高闪点易燃液体', Id: 11},
                {Name: '有毒气体', Id: 12},
                {Name: '酸性腐蚀品', Id: 13},
                {Name: '毒害品', Id: 14},
                {Name: '遇湿易燃物品', Id: 15},
                {Name: '氧化剂', Id: 16}
            ],
            roleId: SiteConfig.account.roleId
        },
        created: function () {
            this.loadData();
        },
        methods: {
            select_status() {
                this.$forceUpdate();
            },
            editClick(row) {
                // this.param = row;
                this.param = Object.assign(this.param, row);
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                var param = {};
                if (this.CNnumber)
                    param.CNnumber = this.CNnumber;
                if (this.dangerousName)
                    param.dangerousName = this.dangerousName;
                if (this.dangerousType)
                    param.dangerousType = this.dangerousType;
                // if (SiteConfig.account.projectNo)
                //     param.projectNo = SiteConfig.account.projectNo;

                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('GovernmentRisk/DangerousContentList', param).success((res) => {
                    var datalist = res.data;
                    for (var i = 0; i < datalist.length; i++) {
                        for (var j = 0; j < vuePage.DangerousData.length; j++) {
                            if (datalist[i].dangerousType == vuePage.DangerousData[j].Id) {
                                datalist[i].dangerousTypeName = vuePage.DangerousData[j].Name;
                            }
                        }
                    }
                    vuePage.tableData = datalist;
                    vuePage.totalCount = res.total;
                });
            },
            addBtn: function () {
                this.editMod = false;
                // var obj = this.param;
                // for (key in obj) {
                //     this.param[key] = '';
                // }
                // this.form.reset()
                // this.param = [];
                this.param = {};
                this.dialogFormVisible = true;
                this.loadData();
            },
            submitClick() {
                if (!this.param.CNnumber) {
                    this.$message({type: 'error', message: 'CN编号不能为空'})
                    return;
                }
                if (!this.param.dangerousName) {
                    this.$message({type: 'error', message: '危险品名称不能为空'})
                    return;
                }
                if (!this.param.dangerousAlias) {
                    this.$message({type: 'error', message: '危险品别名不能为空'})
                    return;
                }
                if (!this.param.dangerousType) {
                    this.$message({type: 'error', message: '危险品类型不能为空'})
                    return;
                }

                if (vuePage.editMod) {
                    HttpUtil.get('GovernmentRisk/DangerousContentUpdate', this.param).success((r) => {
                        if (r.state == 0) {
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)
                        } else {
                            vuePage.$message({type: 'error', message: '修改失败'})
                        }
                    })
                } else {
                    HttpUtil.get('GovernmentRisk/DangerousContentAdd', this.param).success((r) => {
                        if (r.state == 0) {
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)
                        } else {
                            vuePage.$message({type: 'error', message: '添加失败'})
                        }
                    })
                }
            },
            delBtn: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    var p = {};
                    p.Id = id;
                    HttpUtil.get('GovernmentRisk/DangerousContentDelete', p).success((r) => {
                        if (r.state == 0) {
                            vuePage.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vuePage.loadData();
                        } else {
                            vuePage.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取删除'
                    });
                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.loadData();
            },
            onCheckbox: function (row) {
            }
        },

        mounted: function () {
            /* 表格值
            this.eleITableData=[{
                name:'A相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'B相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'C相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            }];*/


        }
    });
</script>
</body>
</html>
